<template>
	<div class="wrapper">
		<div class="header">
			<el-row :gutter="0">
				<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
					<!-- 顶部左侧LOGO -->
					<div class="logo">
						<a target="_self" href="/">
							<img class="img_top" src="../../assets/logo.png" />
							<span class="home_title">编程科技导航</span>
						</a>
					</div>
				</el-col>
				<el-col :xs="6" :sm="8" :md="10" :lg="7" :xl="13">
					<!-- 水平一级菜单 -->
					<div style="float:left;width: 100%;margin: 5px 0;" class="hidden-xs-only">
						<el-menu active-text-color="#037fff" style="width: 100%;" :default-active="toIndex()"
							mode="horizontal" @select="handleSelect" router>
							<el-menu-item index="Home" class="topMenu">
								<i class="el-icon-s-home"></i>
								<template #title>主页</template>

							</el-menu-item>
							<el-menu-item index="resource" class="topMenu">
								<i class="el-icon-menu"></i>
								<template #title>资源</template>

							</el-menu-item>
							<el-menu-item index="wisdom" class="topMenu" v-show="true">
								<i class="el-icon-s-opportunity"></i>
								<template #title>智慧阁</template>
							</el-menu-item>

							<!-- 可以通过v-show控制显示 -->
							<el-menu-item index="person" class="topMenu" v-show="token">
								<i class="el-icon-user-solid"></i>
								<template #title>个人</template>
							</el-menu-item>

						</el-menu>
					</div>
				</el-col>
				<!-- 搜索栏 -->
				<el-col :xs="2" :sm="4" :md="6" :lg="11" :xl="9">
					<div class="col-search hidden-xs-only">
						<el-tooltip class="item" effect="dark" content="在本站搜索你想要的资源" placement="bottom">
							<el-input v-model="search_content" placeholder="资源搜索"
								@keyup.enter.native="search_resource()"></el-input>
						</el-tooltip>
						<el-button class="button_search" type="primary" @click.native="search_resource()"><i
								class="el-icon-search"></i>
						</el-button>
						<el-tooltip class="item" effect="dark" content="推荐资源获得积分和人气" placement="bottom">
							<el-button class="button_recommend" type="primary" @click.native="recommend_resource()">
								<span>推荐</span>
							</el-button>
						</el-tooltip>
					</div>
				</el-col>
				<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
					<!-- 头像部分 -->
					<div class="header-right">
						<!-- 登录状态 -->
						<div class="header-user-con" v-if="userInfo !== null && token">
							<div class="user-avator">
								<img class="el-avatar el-avatar--circle" width="32" height="32" :src="userInfo.portrait"
									v-if="userInfo !== null" />

								<el-avatar :size="48" icon="el-icon-user-solid" v-else></el-avatar>
							</div>
							<el-dropdown @command="handleCommand">
								<span class="el-dropdown-link user-name">
									{{username}}
									<i class="el-icon-caret-bottom"></i>
								</span>

								<template #dropdown>
									<el-dropdown-menu class="drop_menu">
										<el-dropdown-item command="myAccount"><i class="el-icon-user"></i>个人中心
										</el-dropdown-item>
										<el-dropdown-item style="color: #dd0000;" divided command="loginout"><i
												class="el-icon-switch-button"></i>退出登录
										</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
						<!-- 未登录状态 -->
						<div class="header-user-con" v-else>
							<div class="user-avator">
								<el-tooltip class="item" effect="dark" content="登录后解锁更多资源" placement="bottom">
									<el-avatar class="not-login-avatar" @click="goLogin()"> 登录</el-avatar>
								</el-tooltip>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>

	<div class="manin-body">
		<router-view></router-view>
	</div>

</template>

<script>
	import {
		ElMessage
	} from 'element-plus'

	import Qs from 'qs';

	export default {
		created() {
			this.userInfo = JSON.parse(localStorage.getItem('pg_userInfo'));
		},
		data() {
			return {
				token: localStorage.pg_token,
				activeIndex: 'Home',
				activeIndex2: '1',
				isCollapse: false,
				search_content: '',
				userInfo: {},
			}
		},
		computed: {
			username() {
				let username = localStorage.getItem('pg_username');
				return username ? username : this.name;
			}
		},
		methods: {
			getRootPath() {
				//获取当前网址，如： http://localhost:8088/test/test.jsp
				let curPath = window.document.location.href;
				//获取主机地址之后的目录，如： test/test.jsp
				let pathName = window.document.location.pathname;
				let pos = curPath.indexOf(pathName);
				//获取主机地址，如： http://localhost:8088
				let localhostPath = curPath.substring(0, pos);
				//获取带"/"的项目名，如：/test
				let projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
				return (localhostPath); //发布前用此4
			},
			goLogin() {
				this.$router.push('/login');
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath)
			},
			search_resource() {
				window.open(this.getRootPath() + '/resource/search?q=' + this.search_content, '_blank');
			},
			recommend_resource() {
				this.$router.push('/addResource');
			},
			errorHandler() {
				return true
			},
			// // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
			toIndex() {
				// console.log(this.$route.path.split('/')[1])
				return this.$route.path.split('/')[1];
			},
			// 切换菜单栏
			handleSelect(index, indexPath, item, routeResult) {
				// console.log('/' + index);
				this.$router.push('/' + index);
			},
			// 用户名下拉菜单选择事件
			handleCommand(command) {
				if (command == 'myAccount') {
					this.$router.push('/person');
				} else if (command == 'loginout') {
					let that = this;
					// localStorage.removeItem('pg_username');
					// this.$router.push('/login');		

					this.$axios({
						url: 'http://localhost:8081/userLogout',
						method: 'get',

						headers: {
							// 'Content-Type': 'application/x-www-form-urlencoded',
							'token': localStorage.pg_token
						},

						transformResponse: [function(data) {
							// 对接收的 data 进行任意转换处理
							let result = JSON.parse(data);
							// console.log(result.token);
							if (result.code === 200) {
								ElMessage({
									message: '退出登录成功',
									type: 'success',
								});
								localStorage.removeItem("pg_username")
								localStorage.removeItem("pg_userInfo");
								localStorage.removeItem("pg_token");
								that.$router.push('/login');
							} else {
								if(result.error_code !== null || result.error_code!== undefined) {
									ElMessage({
										message: "登录过期，请重新登录",
										type: 'error',
									});
									localStorage.removeItem("pg_username")
									localStorage.removeItem("pg_userInfo");
									localStorage.removeItem("pg_token");
									that.$router.push('/login');
									return data;
								}
								ElMessage({
									message: result.msg,
									type: 'error',
								});
							}
							return data;
						}],
					}).catch(function(error) {
						if (error.response) {
							// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
							that.$message.error("服务器响应出错，请稍后再试");
							// console.log(error.response.data);
							// console.log(error.response.status);
							// console.log(error.response.headers);
						} else if (error.request) {
							// 请求已经成功发起，但没有收到响应
							// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
							// 而在node.js中是 http.ClientRequest 的实例
							that.$message.error("请求服务器错误或超时,请稍后再试");
						} else {
							// 发送请求时出了点问题
							that.$message.error("发送请求出现问题，请稍后再试");
						}
						// console.log(error.config);
						that.loginStatus = false;
					});
				}
			}
		},
	}
</script>

<style>
	body {
		background-color: #f0f0f0;
	}

	a {
		text-decoration: none;
		background-color: transparent;
		outline: none;
		cursor: pointer;
		transition: color .3s;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.col-search {
		float: right;
		display: flex;
		margin-top: 10px;
		margin-right: 5px;
		padding: 5px;
	}

	.not-login-avatar {
		cursor: pointer;
	}

	.is-active.topMenu {
		background-color: #ecf5ff !important;
	}

	.topMenu::before {
		content: "";
		position: absolute;
		top: 0;
		left: 100%;
		width: 0;
		height: 100%;
		border-bottom: 2px solid #409eff;
		transition: 0.15s all linear;
	}

	.topMenu:hover::before {
		left: 0;
		width: 100%;
	}

	.topMenu:hover~.topMenu::before {
		left: 0;
	}


	.topMenu:hover {
		/* color: #409eff !important; */
		background-color: #ecf5ff !important;
	}

	.topMenu {
		margin: 0 0.2rem 0 0.2rem !important;
	}



	.button_search {
		border-radius: 0;
		margin-left: 1px;
	}

	.button_recommend {
		border-radius: 0;
		margin-left: 1rem !important;
	}


	.wrapper {
		width: 100%;
		background: #f0f0f0;
		height: 10% !important;
	}


	.manin-body {
		height: 90%;
		/* margin-top: 0.625rem; */
	}

	.header {
		width: 100%;
		height: 70px;
		margin: 0px;
		padding: 0px;
		background: #ffffff;
		/* font-size: 15px; */
		border-bottom: 1px solid #ffffff;
		box-shadow: 0px 4px 4px #dfdfdf;
	}

	.header .logo {
		float: left;
		margin-left: 60px;
		margin-top: 16px;
		height: 29px;
		width: 160px;
		vertical-align: middle;
	}

	/* --------------- 用户头像区域的样式 ---------------- */
	.header-right {
		float: right;
		padding-right: 30px;
	}

	.header-user-con {
		display: flex;
		height: 70px;
		align-items: center;
	}

	.user-avator {
		margin: 20px 10px 10px 10px;
	}

	.user-avator img {
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-top: -15px;
	}

	.user-name {
		margin-left: 0px;
		font-size: 16px;
		color: #868686;

	}

	.user-name:hover {
		color: #343434;
	}

	.el-dropdown-link {
		cursor: pointer;
	}

	.el-dropdown-menu__item {
		text-align: center;
	}

	.drop_menu {
		user-select: none;
		font-size: 25px;
	}

	/* --------------- 水平一级菜单栏的样式--------------------- */
	.el-menu.el-menu--horizontal {
		border-bottom: none !important;
		float: left;
		/* margin-left: 50px; */
	}

	.el-menu--horizontal>.el-menu-item.is-active {
		border-bottom: 2px solid #409eff !important;
		color: #3989fa;
		font-weight: 700;
	}

	.el-menu--horizontal>.el-menu-item {
		font-size: 16px;
		margin: 0 15px;
		color: black;
	}

	.home_title {
		text-align: center;
		margin-left: -70px;
		padding-left: 20px;
		padding-right: 15px;
		line-height: 40px;
		font-weight: 600;
		font-size: 16px;
		color: #646464;
		cursor: pointer;
	}

	.img_top {
		float: left;
		margin-left: -50px;
		height: 2.5rem;
		width: 2.5rem;
	}

	.el-main {
		--el-main-padding: 0px;
		height: 80%;
	}
</style>
